<template>
  <el-row>
    <el-col v-if="userStore.rule === 'admin'"><Business :operational="operational" /></el-col>
    <el-col v-else><Business :business="business" /></el-col>
  </el-row>
  <el-row>
    <el-col><Order :ordersData="ordersData" /></el-col>
  </el-row>
  <el-row :gutter="24">
    <el-col :span="12" style="margin-right: auto">
      <Overview
        :sold="dishesData.sold"
        :discontinued="dishesData.discontinued"
        title="菜品总览"
        managementLink="dish"
        managementText="菜品管理"
        addLink="dish/detail"
        addText="新增菜品"
      />
    </el-col>
    <el-col :span="12">
      <Overview
        :sold="setmealsData.sold"
        :discontinued="setmealsData.discontinued"
        title="套餐总览"
        managementLink="setmeal"
        managementText="套餐管理"
        addLink="setmeal/detail"
        addText="新增套餐"
      />
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import {
  getBusinessDataAPI,
  getOverviewDishesAPI,
  getOverviewOrdersAPI,
  getOverviewSetmealsAPI,
} from '@/api/business/dashboard'
import Business from './components/Business.vue'
import Order from './components/Order.vue'
import Overview from './components/Overview.vue'
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/userStore'
import type { BusinessData, OperationalData, OverviewDishes, OverviewOrders, OverviewSetmeals } from '@/types/dashboard'
import { getOperationalDataAPI } from '@/api/admin/dashboard'
// 今日数据
const operational = ref({} as OperationalData)
// 今日数据
const business = ref({} as BusinessData)
// 订单管理
const ordersData = ref({} as OverviewOrders)
// 菜品总览
const dishesData = ref({} as OverviewDishes)
// 套餐1总览
const setmealsData = ref({} as OverviewSetmeals)
const userStore = useUserStore()
const businessId = userStore.rule === 'admin' ? undefined : userStore.user.id
onMounted(async () => {
  await Promise.all([getData(), getOrderData(), getOverviewDish(), getOverviewSetmeal()])
})
const getData = () => {
  if (userStore.rule === 'admin') {
    getOperationalData()
  } else {
    getBusinessData()
  }
}
// 系统今日数据
const getOperationalData = async () => {
  try {
    let res = await getOperationalDataAPI()
    operational.value = res.data
  } finally {
  }
}
// 今日数据
const getBusinessData = async () => {
  try {
    let res = await getBusinessDataAPI(businessId!)
    business.value = res.data
  } finally {
  }
}
// 订单管理
const getOrderData = async () => {
  try {
    let res = await getOverviewOrdersAPI(businessId)
    ordersData.value = res.data
  } finally {
  }
}
// 菜品总览
const getOverviewDish = async () => {
  try {
    let res = await getOverviewDishesAPI(businessId)
    dishesData.value = res.data
  } finally {
  }
}
// 套餐总览
const getOverviewSetmeal = async () => {
  try {
    let res = await getOverviewSetmealsAPI(businessId)
    setmealsData.value = res.data
  } finally {
  }
}
</script>
<style lang="scss">
.box .item .tip {
  color: #fd3333;
}
.dashboard-container {
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  margin-bottom: 20px;
  .header {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 18px;
    i,
    span {
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      padding-left: 10px;
    }
    span {
      float: right;
      background: url('../../assets/icons/icon_more@2x.png') no-repeat 100% 50%;
      background-size: contain;
      padding-right: 20px;
      line-height: 16px;
    }
  }
  .box {
    display: flex;
    align-items: center;
    .item {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      font-size: 14px;
      margin-right: 20px;
      background-color: #e3f3fa;
      border-radius: 5px;
      .num {
        font-size: 28px;
        font-weight: 700;
      }
    }
    .item:nth-last-child(1) {
      margin-right: 0;
    }
  }
}
</style>
